<template>
  <div class="d-paner d-paner-noborder">
    <div class="d-paner-body">
      <div v-show="!isAddStatus && !isEditStatus" class="d-row">
        <div class="d-form-group d-form-group-flex">
          <div class="d-form-label d-text-right">
            <label class="label-text">名称:</label>
          </div>
          <div class="d-form-el">
            <Selecter v-model="did" :data="dataList" value-key="id" :text-key="'name'" slide-max-height="200px" />
            <!--
            <select @change="handleChangeData" v-model="did" class="d-form-select">
              <option v-for="item in dataList" :key="item.id" :value="item.id">{{ item.name }}</option>
            </select>-->
          </div>
        </div>
        <div class="d-form-group d-form-group-flex">
          <div class="d-form-label d-text-right">
            <label class="label-text">数据:</label>
          </div>
          <div class="d-form-el">
            <textarea v-model="current.data" class="d-form-textarea"></textarea>
          </div>
        </div>
        <div v-if="current.href" class="d-form-group d-form-group-flex">
          <div class="d-form-label d-text-right">
            <label class="label-text">地址:</label>
          </div>
          <div class="d-form-el">
            <div class="d-form-text">{{ current.href }}</div>
          </div>
        </div>
      </div>
      <div v-show="isAddStatus || isEditStatus" class="d-row">
        <div class="d-form-group d-form-group-flex">
          <div class="d-form-label d-text-right">
            <label class="label-text">名称:</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.name" class="d-form-input" type="text" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex">
          <div class="d-form-label d-text-right">
            <label class="label-text">数据:</label>
          </div>
          <div class="d-form-el">
            <textarea v-model="state.data" class="d-form-textarea"></textarea>
          </div>
        </div>
        <div class="d-form-group d-form-group-flex">
          <div class="d-form-label d-text-right">
            <label class="label-text">地址:</label>
          </div>
          <div class="d-form-el">
            <div class="d-form-text">{{ state.href }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="d-paner-footer">
      <div class="d-paner-actions">
        <button v-show="!isAddStatus && !isEditStatus" @click="handelAdd" class="d-btn d-btn-primary d-actions-item" type="button">新增</button>
        <button v-show="!isAddStatus && !isEditStatus && current.id" @click="handelEdit" class="d-btn d-btn-primary d-actions-item" type="button">编辑</button>
        <button v-show="!isAddStatus && !isEditStatus && current.id" @click="handelDelete" class="d-btn d-btn-default d-actions-item" type="button">删除</button>
        <button v-show="isAddStatus || isEditStatus" @click="handelConfirm" class="d-btn d-btn-primary d-actions-item" type="button">确定</button>
        <button v-show="isAddStatus || isEditStatus" @click="handelBack" class="d-btn d-btn-default d-actions-item" type="button">返回</button>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialoger, FormSelecter as Selecter } from '@daelui/vdog/dist/components.js'
import '@daelui/vdog/dist/business/business.css'
import { ApiTester } from '@daelui/vdog/dist/business/business.umd.min.js'
import dataSer from '@/service/action/data.action.js'

export default {
  components: {
    Dialoger,
    Selecter,
    ApiTester
  },

  props: {

  },

  data () {
    return {
      isShowData: false,
      did: '',
      // 当前数据状态
      current: {
        id: '',
        name: '',
        data: ''
      },
      // 编辑的数据状态
      state: {},
      // 数据列表
      dataList: [],
      isAddStatus: false,
      isEditStatus: false
    }
  },

  watch: {
    isShow () {
      this.isShowData = this.isShow
    },
    isShowData () {
      this.$emit('change', this.isShowData)
    },
    did () {
      this.handleChangeData()
    }
  },

  methods: {
    /**
     * @function 加载单条数据
    */
    loadDataList (id) {
      dataSer.queryListAll().then(res => {
        let data = Array.isArray(res.data) ? res.data : []
        this.dataList = data
      })
    },
    /**
     * @function 加载单条数据
    */
    loadItem (id) {

    },

    handleConfirmData () {

    },

    /**
     * @function 改变数据项
    */
    handleChangeData () {
      let id = this.did
      this.dataList.forEach(item => {
        if (String(item.id) === String(id)) {
          this.current = item
        }
      })
    },

    handelAdd () {
      this.isAddStatus = true
      this.isEditStatus = false
      this.state = {
        name: '',
        data: '',
        href: location.href
      }
    },

    handelEdit () {
      this.isEditStatus = true
      this.isAddStatus = false
      this.state = Object.assign({}, this.current)
    },

    handelBack () {
      this.isEditStatus = false
      this.isAddStatus = false
    },

    handelConfirm () {
      let state = this.state
      if (!state.name || !state.data) {
        Dialoger.alert('请输入数据')
        return false
      }
      let defer = null
      // 新增
      if (this.isAddStatus) {
        defer = dataSer.addItem(state)
      } else { // 修改
        defer = dataSer.editItem(state)
      }
      defer.then(res => {
        if (res.success) {
          this.loadDataList()
          this.handelBack()
        } else {
          Dialoger.danger('操作失败')
        }
      })
    },

    handelDelete () {
      let state = this.current
      if (!state.id) {
        Dialoger.alert('数据不存在')
        return false
      }
      Dialoger.confirm('确认删除吗?').then(b => {
        if (!b) {
          return false
        }
        dataSer.removeItem(state).then(res => {
          if (res.success) {
            this.loadDataList()
            this.current = {
              id: '',
              name: '',
              data: ''
            }
            this.handelBack()
          } else {
            Dialoger.danger('操作失败')
          }
        })
      })
    },

    handelCancel () {
      this.isEditStatus = false
      this.isAddStatus = false
    }
  },

  beforeMount () {

  },

  mounted () {
    // 查询数据列表
    this.loadDataList()
  }
}
</script>

<style lang="less" scoped>
.d-form-label {
  width: 80px;
}
</style>

<style lang="less">
.d-dialog.dasst-dia-data {
  display: flex;
  flex-direction: column;
  width: 480px;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  transform: translate(0, 0);
  & > .d-paner-body {
    flex: 1;
    max-height: none;
  }
}
</style>
